<template>
    <div class="class-edit">
        <el-dialog title="编辑" ref="editDiaglog" 
                :visible.sync="newEditFormDialog"  width="500px" 
                :close-on-click-modal='false'
                :before-close="cancel">

            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="80px" class="demo-ruleForm">
                <el-form-item label="角色名称" prop="name">
                    <el-input v-model="ruleForm.name"></el-input>
                </el-form-item>
                <el-form-item label="职位描述" prop="content">
                    <el-input v-model="ruleForm.content"></el-input>
                </el-form-item>
                <el-form-item>
                    <div class="class-edit-button-footerRight"> 
                         <el-button  @click="cancel">取消</el-button>
                        <el-button type="primary" v-if="ruleForm.id" @click="submitForm('ruleForm')">确认修改</el-button>
                        <el-button type="primary" v-else @click="submitForm('ruleForm')">确认添加</el-button>
                       
                    </div>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>

<script>
import Bus  from './Bus'
import Api from '@/api/Api'
    export default {
        name: 'edit',
        props: {
           editData: Object,
           editFormDialog: Boolean     
        },
        data() {
            return {
                // 规则
                ruleForm: {
                    name: this.editData.name,
                    content: this.editData.content,
                    id: this.editData.id
                },
                rules: {
                name: [
                    { required: true, message: '请输入角色名称', trigger: 'blur' },
                    { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
                ],                
                content: [
                    { required: true, message: '请输入职位描述', trigger: 'blur' }
                ]},
                newEditFormDialog: this.editFormDialog
            };
        },
        methods: {
            cancel (){
                this.newEditFormDialog = false
                this.ruleForm.name = this.editData.name;
                this.ruleForm.content = this.editData.content;
                this.ruleForm.id = this.editData.id;
            },
            submitForm(formName) {
                var this_ =this
                this.$refs[formName].validate((valid) => {
                if (valid) {
                    //挂载Bus 开启加载中...
                    Bus.$emit('open-v-loading')
                    //发起请求 判断是否为编辑或者新增
                    if(this_.ruleForm.id != undefined && this_.ruleForm.id != '' ){         
                        Api.role.modify(this_.ruleForm).then( res => {
                            if(res.data.code ===0){
                                //成功框
                                this.newEditFormDialog = false
                                Bus.$emit('close-v-loading',res.data.msg)
                            }else{
                                this.newEditFormDialog = false
                                Bus.$emit('close-v-loading',res.data.msg,'error')
                            }
                        }).catch(e=>{
                            this.newEditFormDialog = false
                            Bus.$emit('close-v-loading','网络超时,请稍后重试','error') 
                        })
                    }else{
                        let params = this_.ruleForm
                        params.extendsId = this_.$store.state.roleId
                        Api.role.add(params).then( res => {  
                            if(res.data.code ===0){
                                //成功框
                                this.newEditFormDialog = false
                                Bus.$emit('close-v-loading',res.data.msg)
                            }else{
                                this.newEditFormDialog = false
                                Bus.$emit('close-v-loading',res.data.msg,'error')
                            }
                        }).catch(e=>{
                            this.newEditFormDialog = false
                            Bus.$emit('close-v-loading','网络超时,请稍后重试','error') 
                        })
                    }

                } else {
                    return false;
                }
                });
            }
        },
        watch: {
            editData () {
                this.ruleForm.name = this.editData.name;
                this.ruleForm.content = this.editData.content;
                this.ruleForm.id = this.editData.id;
            },
            editFormDialog () {
                this.newEditFormDialog = true
            }
        }
    }

</script>

<style scoped  lang="scss">

</style>